<template>
	<view class="qaresult_pages" v-if="isShowPage">
		<image class="qaresult_bk_img" :src="onlinePic+'answer/qaresult_bk.png'" mode="widthFix"></image>
		<view class="qaresult_box">
			<view class="qaresult_honor_box">
				<image class="qaresult_honor_img" :src="resultinfo.honor.pic"
					:style="resultinfo.stage_status==0?'filter: grayscale(100%) contrast(60%);':''"></image>
			</view>
			<view class="qa_rule" @click="showRule">规则</view>
			<view class="ml-10 mt-30">
				<view class="f-18 c-white">{{resultinfo.result_title}}</view>
				<view class="f-14 c-white mt-5">{{resultinfo.result_desc}}</view>
			</view>
			<view class="qaresult_block_box">
				<view class="qaresult_userinfo" v-if="userinfo">
					<view>
						<view v-if="userinfo.avatar_border" class="qaresult_user_avatar_box">
							<image class="avater_img"
								:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'"></image>
							<image class="qaresult_avatar_border" :src="picUrl+userinfo.avatar_border"></image>
						</view>
						<view v-else class="qaresult_user_avatar_boxd">
							<image class="avater_imgd"
								:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'"></image>
						</view>
						<view v-if="userinfo.username" class="f-15 c-666666 mt-5 text-c ellipsis">{{userinfo.username}}
						</view>
					</view>
				</view>
				<view class="qaresult_progress_box">
					<uni-row :gutter="10">
						<uni-col :span="8">
							<view :class="resultinfo.stage_schedule>0?'qaresult_progress_on':'qaresult_progress'">
							</view>
						</uni-col>
						<uni-col :span="8">
							<view :class="resultinfo.stage_schedule>1?'qaresult_progress_on':'qaresult_progress'">
							</view>
						</uni-col>
						<uni-col :span="8">
							<view :class="resultinfo.stage_schedule>2?'qaresult_progress_on':'qaresult_progress'">
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="text-c mt-10" v-if="resultinfo">
					<view :class="resultinfo.stage_status==1?'qaresulr_status_text_ok':'qaresulr_status_text_no'">
						{{resultinfo.stage_status_text}}
					</view>
				</view>
				<view class="qaresult_text_box" v-if="resultinfo.top">
					<rich-text :nodes="resultinfo.top"></rich-text>
				</view>
				<view class="prize_box" @click="showPrize">
					<image class="prize_img" :src="resultinfo.prize.pic" mode="widthFix"></image>
					<view class="prize_check_text">{{resultinfo.prize.button}}</view>
				</view>
			</view>
			<view class="mt-20">
				<view class="group_public_btn_block"
					@click="tapButton(resultinfo.button[0].url,resultinfo.button[0].name)">
					{{resultinfo.button[0].name}}
				</view>
				<view class="mt-10" v-if="resultinfo.button">
					<uni-row v-if="resultinfo.button.length==3" :gutter="25">
						<uni-col :span="12">
							<view class="group_public_btn_empty"
								@click="tapButton(resultinfo.button[1].url,resultinfo.button[1].name)">
								{{resultinfo.button[1].name}}
							</view>
						</uni-col>
						<uni-col :span="12">
							<view class="group_public_btn_empty"
								@click="tapButton(resultinfo.button[2].url,resultinfo.button[2].name)">
								{{resultinfo.button[2].name}}
							</view>
						</uni-col>
					</uni-row>
					<view v-if="resultinfo.button.length==2" class="group_public_btn_empty"
						@click="tapButton(resultinfo.button[1].url,resultinfo.button[1].name)">
						{{resultinfo.button[1].name}}
					</view>
				</view>
			</view>
		</view>
		<button class="qaresult_share_box" open-type="share">
			<image class="qaresult_share_icon" :src="onlinePic+'answer/share_icon.png'"></image>
		</button>
		<view class="bk_bottom"></view>
		<view v-if="isShowRule||isShowPrize||isShowRank||isShowMistakes" class="mask_box" @click="closePopup"></view>
		<view v-if="isShowRule" class="rule_popup_box">
			<view class="rule_popup">
				<view class="rule_popup_title">规则说明</view>
				<view class="rule_popup_content_box">
					<view class="rule_popup_text">
						<text>{{info.desc}}</text>
					</view>
				</view>
				<view class="display_flex" style="justify-content: center;">
					<view class="rule_popup_btn" @click="closePopup">我知道了</view>
				</view>
			</view>
			<view class="rule_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>
		<view v-if="isShowMistakes" class="rule_popup_box">
			<view class="rule_popup">
				<view class="rule_popup_title">错题统计</view>
				<view class="mistakes_top">
					<view class="c-666666 f-12 display_flex">
						<uni-icons type="circle-filled" size="20" color="#DE5E5E"></uni-icons>
						错误选项
					</view>
					<view class="c-666666 f-12 display_flex">
						<uni-icons type="circle-filled" size="20" color="#26D488"></uni-icons>
						正确选项
					</view>
				</view>
				<view class="mistakes_popup_box">
					<view class="f-13 mb-15 ml-10">共计回答:{{resultinfo.question_num}}题 错题：<span style="color: #EF4848;"
							v-if="resultinfo.wrong_num>0">{{resultinfo.wrong_num}}</span></view>
					<view class="mistakes_popup_cell_box">
						<view v-for="item in resultinfo.wrong_question" class="mistakes_popup_cell">
							<view class="f-16">{{item.title}}</view>
							<view class="f-13 mt-10">
								<view v-if="item.show_type==2" v-for="itema in item.option" :key="itema.id">
									<view v-if="item.content_type==1">
										<view class="display_flex mt-10">
											<uni-icons v-if="itema.wrong_status==0" type="circle" size="20"
												color="#666666"></uni-icons>
											<uni-icons v-if="itema.wrong_status==1" type="circle-filled" size="20"
												color="#26D488"></uni-icons>
											<uni-icons v-if="itema.wrong_status==2" type="circle-filled" size="20"
												color="#DE5E5E"></uni-icons>

											<view v-if="itema.wrong_status==0" style="margin-left: 4rpx;">
												{{itema.content}}
											</view>
											<view v-if="itema.wrong_status==1"
												style="margin-left: 4rpx;color: #26D488;">
												{{itema.content}}<span v-if="itema.wrong_text"
													style="color:#DE5E5E;margin-left: 4rpx;">
													{{itema.wrong_text}}</span>
											</view>
											<view v-if="itema.wrong_status==2"
												style="margin-left: 4rpx;color: #DE5E5E;">
												{{itema.content}}<span v-if="itema.wrong_text"
													style="color:#DE5E5E;margin-left: 4rpx;">
													{{itema.wrong_text}}</span>
											</view>
										</view>

									</view>
									<view v-else class="mt-10">
										<image @click="checkImggg(itema.img)" class="choose_imgL" mode="aspectFill"
											:src="itema.img" v-if="item.content_type==2"></image>
										<video class="choose_imgL" mode="aspectFill" :src="itema.img"
											v-if="item.content_type==3"></video>
										<view class="display_flex">
											<uni-icons v-if="itema.wrong_status==0" type="circle" size="20"
												color="#666666"></uni-icons>
											<uni-icons v-if="itema.wrong_status==1" type="circle-filled" size="20"
												color="#26D488"></uni-icons>
											<uni-icons v-if="itema.wrong_status==2" type="circle-filled" size="20"
												color="#DE5E5E"></uni-icons>
											<view v-if="itema.wrong_status==0" style="margin-left: 4rpx;">
												{{itema.content}}
											</view>
											<view v-if="itema.wrong_status==1"
												style="margin-left: 4rpx;color: #26D488;">
												{{itema.content}}<span v-if="itema.wrong_text"
													style="color:#DE5E5E;margin-left: 4rpx;">
													{{itema.wrong_text}}</span>
											</view>
											<view v-if="itema.wrong_status==2"
												style="margin-left: 4rpx;color: #DE5E5E;">
												{{itema.content}}<span v-if="itema.wrong_text"
													style="color:#DE5E5E;margin-left: 4rpx;">
													{{itema.wrong_text}}</span>
											</view>

										</view>
									</view>
								</view>
								<uni-row v-if="item.show_type==1">
									<uni-col v-for="itema in item.option" :key="itema.id" :span="12">
										<view v-if="item.content_type==1">
											<view class="display_flex mt-10">
												<uni-icons v-if="itema.wrong_status==0" type="circle" size="20"
													color="#666666"></uni-icons>
												<uni-icons v-if="itema.wrong_status==1" type="circle-filled" size="20"
													color="#26D488"></uni-icons>
												<uni-icons v-if="itema.wrong_status==2" type="circle-filled" size="20"
													color="#DE5E5E"></uni-icons>
												<view v-if="itema.wrong_status==0" style="margin-left: 4rpx;">
													{{itema.content}}
												</view>
												<view v-if="itema.wrong_status==1"
													style="margin-left: 4rpx;color: #26D488;">{{itema.content}}<span
														v-if="itema.wrong_text"
														style="color:#DE5E5E;margin-left: 4rpx;">
														{{itema.wrong_text}}</span></view>
												<view v-if="itema.wrong_status==2"
													style="margin-left: 4rpx;color: #DE5E5E;">{{itema.content}}<span
														v-if="itema.wrong_text"
														style="color:#DE5E5E;margin-left: 4rpx;">
														{{itema.wrong_text}}</span></view>

											</view>
										</view>
										<view v-else class="mt-10">
											<image @click="checkImggg(itema.img)" class="choose_img" mode="aspectFill"
												:src="itema.img" v-if="item.content_type==2"></image>
											<video class="choose_img" mode="aspectFill" :src="itema.img"
												v-if="item.content_type==3"></video>
											<view class="display_flex">
												<uni-icons v-if="itema.wrong_status==0" type="circle" size="20"
													color="#666666"></uni-icons>
												<uni-icons v-if="itema.wrong_status==1" type="circle-filled" size="20"
													color="#26D488"></uni-icons>
												<uni-icons v-if="itema.wrong_status==2" type="circle-filled" size="20"
													color="#DE5E5E"></uni-icons>
												<view v-if="itema.wrong_status==0" style="margin-left: 4rpx;">
													{{itema.content}}
												</view>
												<view v-if="itema.wrong_status==1"
													style="margin-left: 4rpx;color: #26D488;">
													{{itema.content}}<span v-if="itema.wrong_text"
														style="color:#DE5E5E;margin-left: 4rpx;">
														{{itema.wrong_text}}</span>
												</view>
												<view v-if="itema.wrong_status==2"
													style="margin-left: 4rpx;color: #DE5E5E;">
													{{itema.content}}<span v-if="itema.wrong_text"
														style="color:#DE5E5E;margin-left: 4rpx;">
														{{itema.wrong_text}}</span>
												</view>

											</view>
										</view>
									</uni-col>
								</uni-row>
							</view>
						</view>
						<view></view>
						<view></view>
					</view>
				</view>
			</view>
			<view class="rule_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>
		<view v-if="isShowPrize" class="prize_popup_box">
			<view class="prize_popup">
				<view class="prize_popup_title">{{resultinfo.prize.popup_title}}</view>
				<view class="prize_popup_content">
					<view class="prize_img_box">
						<image class="prize_img" :src="resultinfo.prize.pic" mode="widthFix"></image>
					</view>
					<view class="f-16 text-c mt-10">{{resultinfo.prize.title}}</view>
					<view class="prize_popup_desc_box">
						<view class="c-00A0DC text-c">获取方式</view>
						<view class="c-999999 mt-10">
							<text>{{resultinfo.prize.popup_desc}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="prize_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>
		<view v-if="isShowRank" class="rank_popup_box">
			<view class="rank_popup">
				<view class="rule_popup_title">排行榜</view>
				<view class="rank_popup_table_head">
					<uni-row>
						<uni-col :span="5">
							<view class="text-c c-999999">排名</view>
						</uni-col>
						<uni-col :span="9">
							<view class="text-c c-999999">用户</view>
						</uni-col>
						<uni-col :span="10">
							<view class="text-c c-999999">成绩</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="rank_popup_oneself">
					<uni-row>
						<uni-col :span="5">
							<view class="text-c c-999999">{{rankinfo.ranking}}</view>
						</uni-col>
						<uni-col :span="9">
							<view class="c-5F809F display_flex">
								<view class="avatar_box">
									<image class="avatar"
										:src="rankinfo.avatar?picUrl+rankinfo.avatar:onlinePic+'avatar.png'"></image>
								</view>
								<view class="ml-5 ellipsis f-13">{{rankinfo.username}}</view>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="text-c f-13 c-5F809F">{{rankinfo.time}}秒</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="rank_popup_link_box" v-if="list.length>0">
					<image class="rank_popup_link" :src="onlinePic+'answer/link_block.png'" mode="widthFix"></image>
				</view>
				<view class="rank_popup_other">
					<view v-for="(item,index) in list" :key="item.num">
						<view v-if="index==0" class="rank_popup_first">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c">
										<image class="rank_list_icon" :src="onlinePic+'answer/first.png'"></image>
									</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-5F809F display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-5F809F f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-if="index==1" class="rank_popup_second">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c">
										<image class="rank_list_icon" :src="onlinePic+'answer/second.png'"></image>
									</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-5F809F display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-5F809F f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-if="index==2" class="rank_popup_third">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c">
										<image class="rank_list_icon" :src="onlinePic+'answer/third.png'"></image>
									</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-5F809F display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-5F809F f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-if="index>2" class="rank_popup_cell">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c c-999999">{{index+1}}</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-999999 display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-999999 f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>
				<view class="rank_popup_close" @click="closePopup">
					<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQaInfo,
		getQaResult,
		getrankList
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '', //答题详情
				resultinfo: {
					button: [],
				}, //结果详情
				rankinfo: '', //排行榜详情
				isShowPage: false,
				channel: '',
				stage_id: '',
				isShowRule: false,
				isShowPrize: false,
				isShowRank: false,
				isShowMistakes: false,
				list: [],
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				userinfo: uni.getStorageSync('userinfo'),
			};
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo')
			if (uni.getStorageSync('onload')) {
				this.getQaInfo()
				this.getQaResult()
				this.getrankList()
				uni.removeStorage({
					key: 'onload',
				})
			}
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		onLoad(options) {
			this.subject_id = options.subject_id
			this.channel = options.channel
			this.stage_id = options.stage_id
			if (uni.getStorageSync('access_token')) {
				this.getQaInfo()
				this.getQaResult()
				this.getrankList()
			}
		},
		methods: {
			getQaInfo() {
				getQaInfo({
					channel: this.channel,
					subject_id: this.subject_id,
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data
						uni.setNavigationBarTitle({
							title: res.data.top
						})
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getQaResult() {
				getQaResult({
					channel: this.channel,
					subject_id: this.subject_id,
					stage_id: this.stage_id,
				}).then(res => {
					if (res.state == 1) {
						this.resultinfo = res.data.info
						this.isShowPage = true
						if (res.data.info.wrong_num > 0) {
							this.isShowMistakes = true
						}
						var params = {
							event_code: '答题结果',
							event_id: this.subject_id,
							title: res.data.info.top_title,
							path: 'pages/qa/qaresult/qaresult',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getrankList() {
				getrankList({
					channel: this.channel,
					subject_id: this.subject_id,
					type: 1,
				}).then(res => {
					if (res.state == 1) {
						this.list = res.data.info.list
						this.rankinfo = res.data.info.info
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			tapButton(url, name) {
				if (url == '本赛季排行榜') {
					this.isShowRank = true
				} else if (url == '查看错题') {
					this.isShowMistakes = true
				} else {
					uni.redirectTo({
						url: url,
					})
				}
				var params = {
					event_code: '答题结果',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					source_page: '答题结果-点击' + name,
					path: 'pages/qa/qaresult/qaresult',
				}
				app.BurialPoint(params)
			},

			showRule() {
				this.isShowRule = true
				var params = {
					event_code: '答题结果',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					source_page: '答题结果-规则',
					path: 'pages/qa/qaresult/qaresult',
				}
				app.BurialPoint(params)
			},
			showPrize() {
				this.isShowPrize = true
				var params = {
					event_code: '答题结果',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					source_page: '答题结果-查看礼品',
					path: 'pages/qa/qaresult/qaresult',
				}
				app.BurialPoint(params)
			},
			closePopup() {
				this.isShowRule = false
				this.isShowPrize = false
				this.isShowRank = false
				this.isShowMistakes = false
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title ? this.info.title : '答题',
				imageUrl: this.info.share_img ? this.info.share_img : '',
				path: '/pages/qa/qastart/qastart?subject_id=' + this.subject_id + '&channel=' + this.channel
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.qaresult_pages {
		height: 100vh;
		position: relative;
		overflow: hidden;

		.qaresult_bk_img {
			width: 100%;
			vertical-align: middle;
		}

		.qaresult_honor_box {
			position: absolute;
			top: 66rpx;
			right: 57rpx;
			z-index: 3;

			.qaresult_honor_img {
				width: 272rpx;
				height: 305rpx;
				vertical-align: middle;
			}
		}

		.qaresult_box {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			padding: 30rpx 30rpx 80rpx 30rpx;
			overflow: auto;

			.qa_rule {
				color: #ffffff;
				font-size: 26rpx;
				text-decoration: underline;
			}

			.qaresult_block_box {
				margin-top: 130rpx;
				padding: 30rpx 30rpx 60rpx 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;

				.qaresult_userinfo {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: -80rpx;

					.qaresult_user_avatar_box {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						border-radius: 100%;

						.avater_img {
							width: 85rpx;
							height: 85rpx;
							border-radius: 100%;
						}

						.qaresult_avatar_border {
							width: 100rpx;
							height: 100rpx;
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							z-index: 1;
						}

						.avater_v_icon {
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							right: 10rpx;
							bottom: 0;
							z-index: 1;
						}
					}

					.qaresult_user_avatar_boxd {
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
						border: 4rpx solid #ffffff;

						.avater_imgd {
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
						}
					}
				}

				.qaresult_progress_box {
					margin-top: 40rpx;

					.qaresult_progress {
						width: 100%;
						height: 20rpx;
						background: #F1F1F1;
						border-radius: 2rpx;
					}

					.qaresult_progress_on {
						width: 100%;
						height: 20rpx;
						border-radius: 2rpx;
						background-image: linear-gradient(to right, #00A0DC, #69D5FE);
					}
				}

				.qaresulr_status_text_ok {
					color: #00A0DC;
					font-size: 24rpx;
					display: inline-block;
					padding: 12rpx 15rpx;
					border-radius: 50rpx;
					border: 1rpx solid #00A0DC;
				}

				.qaresulr_status_text_no {
					color: #B6B6B6;
					font-size: 24rpx;
					display: inline-block;
					padding: 12rpx 15rpx;
					border-radius: 50rpx;
					border: 1rpx solid #B5B5B5;
				}

				.qaresult_text_box {
					color: #666666;
					font-size: 26rpx;
					line-height: 38rpx;
					margin-top: 30rpx;
				}

				.prize_box {
					margin: 50rpx 100rpx 0 100rpx;
					padding: 35rpx;
					border-radius: 8rpx;
					border: 1rpx solid #DFDFDF;


					.prize_img {
						width: 100%;
						vertical-align: middle;
						filter: grayscale(100%) contrast(60%);
					}

					.prize_check_text {
						color: #A9AAAA;
						font-size: 22rpx;
						margin-top: 24rpx;
						text-align: center;
						text-decoration: underline;
					}
				}
			}
		}

		.bk_bottom {
			height: 230rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			background-image: linear-gradient(to top, rgba(0, 160, 220, 0.2), #f1f1f1);
		}

		.qaresult_share_box {
			position: absolute;
			right: 15rpx;
			bottom: 300rpx;
			z-index: 3;

			.qaresult_share_icon {
				width: 102rpx;
				height: 102rpx;
				vertical-align: middle;
			}
		}

		button::after {
			border: none !important;
		}

		button {
			padding-left: 0 !important;
			padding-right: 0 !important;
			background-color: transparent !important;
		}

		.mistakes_top {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: #F6F6F6;
		}

		.mistakes_popup_box {
			height: 55vh;
			padding: 30rpx;
			overflow-y: auto;

			.mistakes_popup_cell_box {

				.mistakes_popup_cell {
					padding: 40rpx 10rpx;
					border-top: 1rpx solid #DFDFDF;
				}

				.choose_img {
					width: 240rpx;
					height: 240rpx;
					margin-left: 0;
				}

				.choose_imgL {
					width: 500rpx;
					height: 240rpx;
					margin-left: 0;
				}
			}
		}


	}
</style>